<template>
	<div :style="{ backgroundColor: dominantColor }">
		<img ref="image" :src="imageUrl" style="display: block; width: 100%" />
		<div v-if="dominantColor">Dominant Color: {{ dominantColor }}</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import convert from 'color-convert';
import ColorThief from 'color-thief-browser';
export default {
	data() {
		return {
			imageUrl: '/img/images.jpg',
			dominantColor: ''
		};
	},
	computed: { ...mapGetters(['siteInfo']) },
	mounted() {
		console.log(this.siteInfo);
		this.getDominantColor();
	},
	methods: {
		getDominantColor() {
			try {
				const colorThief = new ColorThief();
				const imgElement = this.$refs['image'];
				imgElement.addEventListener('load', async () => {
					let color = await colorThief.getColor(imgElement);
					console.log(color.join());
					this.dominantColor = `rgb(${color.join()})`;
					console.log(convert.rgb.hex(color));
				});
			} catch (error) {
				console.error('Error getting dominant color:', error);
			}
		}
	}
};
</script>

<style scoped></style>
